<template>
  <div>
    <h2>我是首页</h2>
    <p>我是首页内容：嘿嘿嘿</p>
    <h2>{{ test }}</h2>
    <router-link to="/routerHome/routerHomeNews">新闻</router-link>
    <router-link to="/routerHome/routerHomeMessage">消息</router-link>
    <keep-alive>
      <router-view></router-view>
    </keep-alive>
  </div>
</template>
<script>
export default {
  name: 'routerHome',
  data() {
    return {
      path:''
    }
  },
  created(){
    console.log('home created');
  },
  mounted(){
    console.log('home mounted');
  },
  updated(){
    console.log('home updated');
  },
  // deactivated 和 activated 想使用需要 index 页面用 keep-alive 包住 router-view
  deactivated(){
    console.log('home deactivated');
  },
  activated(){
    console.log('home activated',this.path);
    this.$router.push(this.path)
  },
  // 离开时的路由
  beforeRouteLeave(to,from,next){
    this.path = this.$route.path;
    console.log('home beforeRouteLeave---离开时的路由',this.path);
    next()
  }
}
</script>
<style lang="scss" scoped>
h1,h2,h3,p{
  margin-bottom: 15px;
}
a{
  display: inline-block;
  margin-bottom: 15px;
  margin-right: 10px;
}
.router-link-active{
  color:red
}
</style>
